<template>
  <div class="d-item-wrap">
    <div class="d-title" v-if="title">{{title}}</div>
    <div class="d-content">
      <div class="item"
           v-for="item in list"
           v-show="item.singLine !== 99"
           :class="{'inline-wrap':item.singLine === 1}">
        <div class="label">
          <span class="neededFlag" v-if="item.isRequired == 1 && !item.isReadonly"></span>
          {{item.label}}
          <voice-txt-area v-if="item.talk == 1"></voice-txt-area>
          <div class="plus-txt-wrap" v-if="item.element == 'file' && !item.isReadonly">
            <div class="file-wrap" @click="_addFile(item)">上传</div>
          </div>
        </div>
        <div class="txt" :class="{'txt-noPad':item.type2 === 9}">
          <input class="input-c" v-if="item.element == 'text'"
                 :class="{'input-h':item.singLine != 1}"
                 :id="item.id"
                 type="text"
                 v-model="item.attributesValue"
                 :maxlength="item.size"
                 :readonly="item.isReadonly"
                 :placeholder="item.placeholder">
          <input class="input-c" v-if="item.type2 == 2"
                 :id="item.id"
                 :class="{'input-h':item.singLine != 1}"
                 type="text"
                 :data-value="item.value2"
                 :value="item.value"
                 readonly>
          <textarea class="txt-area" v-if="item.element == 'textarea'"
                    :placeholder="item.placeholder"
                    v-model="item.attributesValue"
                    :maxlength="item.size"
                    :readonly="item.isReadonly"
                    :id="item.id">
          </textarea>
          <input class="input-c" v-if="item.element == 'radio' || item.element == 'select'"
                 readonly
                 :id="item.id"
                 type="text"
                 :value="item.attributesValue == ''?'请选择 > ':item.attributesValue"
                 @click="_pick(item)">
          <input class="input-c" v-if="item.element == 'datetime'"
                 :id="item.id" type="text"
                 :value="item.attributesValue == ''?'请选择 > ':item.attributesValue"
                 @click="_timePick(item)"
                 readonly>
          <template v-if="item.element == 'file'&& !item.isReadonly">
            <div class="txt-checked-item txt-checked-item-file"
                 :class="{'txt-checked-item-file-1':item.isReadonly}"
                 v-for="(file,index) in item.attributesValue"
                 v-if="item.attributesValue && item.attributesValue.length && file.name"
                 :key="index"
                 @click="_deleteFile(item.attributesValue,index)">
              {{file.name}}
            </div>
          </template>
          <template v-if="item.element == 'file' && item.isReadonly">
            <div class="txt-checked-item txt-checked-item-file txt-checked-item-file-1"
                 v-for="(file,index) in item.attributesValue"
                 v-if="item.attributesValue && item.attributesValue.length && file.name"
                 :key="index"
                 @click="openFile(file)">
              {{file.name}}
            </div>
          </template>
          <template v-if="item.element == 'checkbox'">
            <div v-for="option in item.options" class="txt-multiChose-item-wrap">
              <input type="checkbox"
                     class="multi-checkbox"
                     :value="option"
                     v-model="item.optionChecked"
                     :disabled="item.isReadonly">
              <div class="txt-multiChose-item">
                {{option.key}}
              </div>
            </div>
          </template>
          <input v-if="item.element == 'number'"
                 class="input-c"
                 :class="{'input-h':item.singLine != 1}"
                 :id="item.id"
                 :maxlength="item.size"
                 type="number"
                 v-model="item.attributesValue"
                 :readonly="item.isReadonly"
                 :placeholder="item.placeholder">
          <div class="txt-multiLine" v-if="item.element == 'read'">
            {{item.attributesValue}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  /*
   dv = 1 需要获取 data-value 值
   @param type
   * 1 单行文本
   * 2 只读信息
   * 3 文本输入框
   * 4 多选框
   * 5. 选择器
   * 6. 时间选择器
   * 8. 附件上传
   * 9. 多选框
   * 10. 单行数字
   *
   * 单行文本输入框     text    	varchar
   多行文本输入框	    textarea	text
   数字输入框  	    number		int
   日期输入框 		datetime	datatime
   单选框			radio		varchar
   多选框  		    checkbox	varchar
   下拉框  		    select		varchar
   * */

  import voiceTxtArea from "./voiceTxtarea.vue"

  export default {
    data() {
      return {
        files: []
      };
    },
    props: {
      title: {
        default: ""
      },
      list: {
        default: []
      },
    },
    methods: {
      _onclick(i) {
        this.$emit("_onclick", i);
      },
      _pick(item) {
        if (!item.isReadonly) {
          let picker = new mui.PopPicker(
            {
              layer: item.layer
            }
          );
          picker.setData(item.options);
          picker.show(function (selectItems) {
//            let text = [];
//            let value = [];
//            selectItems.forEach((i) => {
//              text.push(i.text);
//              value = i.value;
//            });
//          let pt = text.join("-");
            item.attributesValue = selectItems[0].text;
          })
        }
      },
      _timePick(item) {
        if (!item.isReadonly) {
          let option = {
            type: item.dateType,
          };
          if (item.endDate) {
            option.endDate = item.endDate;
          }

          let dtPicker = new mui.DtPicker(option);

          dtPicker.show(function (selectItems) {
            item.attributesValue = selectItems.value;
          })

        }
      },
      _addFile(item) {
        _vrvInit.uploadFile().then(files => {
          let arr = item.attributesValue || [];
          files.forEach(i=>{
            arr.push(i);
          });
          item.attributesValue = arr;
        });
      },
      _deleteFile(files, index) {
        files.splice(index, 1);
      },
      openFile(file){
        _methods.fileDownLoad(file);
      }
    },
    watch: {
      files(v){
        let val = _methods.arrToString(v, "fileId");
        _methods.sVal("fileIds", val);
      }
    },
    components: {
      voiceTxtArea
    },
    mounted(){
      let self = this;
      _data.bus.$on("draftFile", (fileId) => {
        if (this._props.list.attachment) {
          _methods.fileInfoGet(fileId).then(data => {
            self.files = data.data;
            setTimeout(() => {
              _methods.sVal("fileIds", data.ids, data.ids);
            }, 200);
          });
        }
      });
    },
    beforeDestroy(){
      _data.bus.$off("draftFile");
    },
  }

</script>

